我们刚接触前端时候，提到前端样式，首先会想到的就是原生CSS；随着技术的迭代更新，原生CSS不可避免的暴露了许多问题，具体有哪些问题呢？
开发体验差。比如不能样式嵌套、不能使用变量...。解决方案：CSS预处理器，常用的css预处理有Sass/Scss、Less和Stylus// 样式只能一层层平铺，不能像预处理器一样嵌套.header {}.header .menu {}.header .menu .box {}浏览器兼容性问题。在处理浏览器兼容性问题时，针对有些属性（如transform）我们会加上不同的浏览器前缀-webkit-、-moz-、-ms-、-o-，如果手动一个个去加，这显然会极大影响开发效率。 解决方案：PostCSS，用来解析CSS，自动添加浏览器前缀全局样式的污染。 当使用相同类名时，就可能会造成样式的覆盖和污染。解决方案：CSS Modules，将css类名处理成哈希值，这样就不存在覆盖和污染的可能；在Vue中scoped也能一定程度上解决这个问题。
// a.css.test {}// b.css// 会覆盖a.css中test，造成显示问题.test {}CSS 预处理在这里我们以Less为例，在Vite中我们只需要安装Less，就能直接使用
pnpm i less less-loader -D常规使用：
// index.vueThis is Header
//@import '../index.less';.header {width:200px}变量的使用：
// variable.less@primary-color: #005eff; // 全局主色// index.vueThis is Header
@import './variable.less';.header{background-color: @primary-color;}看到这里你会发现，每次使用@primary-color时都需要@import './variable.less';，那有没有办法可以自动导入呢，这个还真有，让我们改造一下vite.config.js
// vite.config.jsimport { defineConfig, normalizePath } from 'vite';const variablePath = normalizePath(path.resolve('./src/variable.less'));export default defineConfig({...css: {preprocessorOptions: {less: {additionalData: `@import "${variablePath}";`}}}})这样你就可以直接使用@primary-color，不需要@import './variable.less';